<template>
  <div class="center">
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-input
        v-model="sitename"
        :clearable="true"
        placeholder="请输入站点名称"
        :style="{ width: '200px' }"
      ></el-input>
      <el-select
        v-model="ordertype"
        :clearable="true"
        :filterable="true"
        placeholder="请选择工单类型"
        :style="{ width: '200px' }"
      >
        <el-option
          v-for="item in ordertypelist"
          :key="item.index"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="orderstatus"
        :clearable="true"
        :filterable="true"
        placeholder="请选择工单状态"
        :style="{ width: '200px' }"
      >
        <el-option
          v-for="item in orderstatuslist"
          :key="item.index"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="ordernum"
        :clearable="true"
        placeholder="请输入工单编号"
        :style="{ width: '200px' }"
      ></el-input>
      <el-button type="primary" @click="getorder">查询</el-button>
    </div>
    <div class="cake_chart clearfix">
      <div class="first_box">
        <dv-border-box-11
          :color="['#11caff']"
          backgroundColor="transparent"
          title="站点区域统计"
        >
          <div id="orderarea" class="first_cake"></div>
        </dv-border-box-11>
      </div>
      <div class="second_box">
        <dv-border-box-11
          :color="['#11caff']"
          backgroundColor="transparent"
          title="工单状态统计"
        >
          <div id="ordertype" class="second_cake"></div>
        </dv-border-box-11>
      </div>
      <div class="third_box">
        <dv-border-box-11
          :color="['#11caff']"
          backgroundColor="transparent"
          title="工单状态分类统计"
        >
          <div class="timer">
            <div>
              <el-radio-group
                v-model="radio"
                fill="#00306F"
                @change="timeChange"
              >
                <el-radio-button label="年"></el-radio-button>
                <el-radio-button label="月"></el-radio-button>
                <el-radio-button label="周"></el-radio-button>
                <el-radio-button label="日"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div id="ordertime" class="third_cake"></div>
        </dv-border-box-11>
      </div>
    </div>
    <div class="table">
      <dv-border-box-11
        :color="['#11caff']"
        backgroundColor="transparent"
        title="工单信息"
      >
        <el-table
          :data="tableData"
          class="customer-table"
          height="40vh"
          :header-cell-style="headClass"
        >
          <template slot="empty">
            <div></div>
          </template>
          <el-table-column
            prop="id"
            label="工单编号"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="siteNo"
            label="站点编号"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="siteName"
            label="站点名称"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="工单标题"
            align="center"
            width="250"
          >
          </el-table-column>
          <el-table-column prop="status" label="工单状态" align="center">
            <template slot-scope="scope">
              <span style="color: #67c23a" v-if="scope.row.status == 'handled'"
                >已处理</span
              >
              <span
                style="color: #409eff"
                v-else-if="scope.row.status == 'newly'"
                >待处理</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="category" label="告警分类" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 'newly'"
                size="mini"
                type="primary"
                @click="change(scope.row)"
                >处理</el-button
              >
              <el-button
                v-if="scope.row.status == 'handled'"
                size="mini"
                type="primary"
                @click="examine(scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="EnterWarning(scope.row)"
                >查看告警</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          @prev-click="prevclick"
          @next-click="nextclick"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total,prev, pager, next"
          :total="total"
        >
        </el-pagination>
        <div class="asile-echart" v-show="loading">
          <dv-loading></dv-loading>
        </div>
      </dv-border-box-11>
    </div>

    <!-- 处理工单 -->
    <el-dialog
      class="order-add"
      :title="ordersiteNo"
      :inline="true"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="updateorderform"
        label-position="left"
        label-width="100px"
        ref="updateorderruleform"
        :rules="updateorderrules"
      >
        <el-form-item label="附件一" prop="imagePath1">
          <el-upload
            class="upload-demo"
            ref="upload1"
            action=" "
            accept="image/png, image/jpg, image/jpeg, .txt, .doc, .docx, .xls, .xlsx, .pdf"
            :before-upload="changelist1"
            :file-list="fileList1"
            :http-request="submit1"
            :limit="1"
          >
            <el-button size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传image/png, image/jpg, image/jpeg, .txt, .doc, .docx, .xls,
              .xlsx, .pdf文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="附件二" prop="imagePath2">
          <el-upload
            class="upload-demo"
            ref="upload2"
            action=""
            accept="image/png, image/jpg, image/jpeg, .txt, .doc, .docx, .xls, .xlsx, .pdf"
            :before-upload="changelist2"
            :file-list="fileList2"
            :http-request="submit2"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传image/png, image/jpg, image/jpeg, .txt, .doc, .docx, .xls,
              .xlsx, .pdf文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="附件三" prop="imagePath3">
          <el-upload
            class="upload-demo"
            ref="upload3"
            action=""
            accept="image/png, image/jpg, image/jpeg, .txt, .doc, .docx, .xls, .xlsx, .pdf"
            :before-upload="changelist3"
            :file-list="fileList3"
            :http-request="submit3"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传image/png, image/jpg, image/jpeg, .txt, .doc, .docx, .xls,
              .xlsx, .pdf文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="回复描述" prop="reply">
          <el-input type="textarea" v-model="updateorderform.reply"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="updateorderform.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateorder(updateorderform)"
            >确认</el-button
          >
          <el-button @click="updateorderout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 工单详情 -->
    <el-dialog
      class="order-add"
      :title="ordertitle"
      :inline="true"
      :visible.sync="dialogFormVisible1"
      :append-to-body="true"
    >
      <el-form
        class="orderdetail-info clearfix"
        :model="orderdetail"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="工单标题">
          <el-input v-model="orderdetail.title"></el-input>
        </el-form-item>
        <el-form-item label="工单编号">
          <el-input v-model="orderdetail.id"></el-input>
        </el-form-item>
        <el-form-item label="站点编号">
          <el-input v-model="orderdetail.siteNo"></el-input>
        </el-form-item>
        <el-form-item label="问题分类">
          <el-input v-model="orderdetail.category"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="orderdetail.remark"></el-input>
        </el-form-item>
        <el-form-item label="附件一">
          <template slot-scope="scope">
            <el-button
              v-if="orderdetail.imagePath1"
              size="small"
              type="primary"
              @click="download1(orderdetail)"
              >下载附件</el-button
            >
            <span
              v-else="orderdetail.imagePath1 == 'null'"
              style="color: rgba(0, 255, 255, 1)"
              >未上传附件</span
            >
          </template>
        </el-form-item>
        <el-form-item label="附件二">
          <template slot-scope="scope">
            <el-button
              v-if="orderdetail.imagePath2"
              size="small"
              type="primary"
              @click="download2(orderdetail)"
              >下载附件</el-button
            >
            <span
              v-else="orderdetail.imagePath1 == 'null'"
              style="color: rgba(0, 255, 255, 1)"
              >未上传附件</span
            >
          </template>
        </el-form-item>
        <el-form-item label="附件三">
          <template slot-scope="scope">
            <el-button
              v-if="orderdetail.imagePath3"
              size="small"
              type="primary"
              @click="download3(orderdetail)"
              >下载附件</el-button
            >
            <span
              v-else="orderdetail.imagePath1 == 'null'"
              style="color: rgba(0, 255, 255, 1)"
              >未上传附件</span
            >
          </template>
        </el-form-item>
        <el-form-item>
          <el-button @click="orderdetailout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Search from "../../common/select";
export default {
  components: {
    Search,
  },
  data() {
    return {
      sitename: "",
      ordernum: "",
      ordertype: "",
      orderstatus: "",
      timer: "",
      radio: "日",
      ordersiteNo: "",
      loading: false,
      dialogFormVisible: false, //处理工单弹窗
      dialogFormVisible1: false, //工单详情弹窗
      fileList1: [],
      fileList2: [],
      fileList3: [],
      ordertypelist: [
        {
          value: "温度告警",
        },
        {
          value: "网络告警",
        },
        {
          value: "box告警",
        },
        {
          value: "程序异常告警",
        },
      ],
      orderstatuslist: [],
      message: {},
      updateorderform: {
        reply: "",
      },
      updateorderrules: {},
      updateprderruleform: {},
      sitename1: "", //站点名称（弹出层）
      color1: [
        "rgba(39, 130, 205, 1)",
        "rgba(252, 161, 0, 1)",
        "rgba(253, 63, 25, 1)",
        "rgba(255, 235, 97, 1)",
      ],
      chartData: [],
      $chart1: "",
      $chart2: "",
      $chart3: "",
      currentPage: 1,
      pagesize: 10,
      ordertitle: "",
      dialogFormVisible: false,
      orderdetail: {},
      tableData: [],
      total: 400, //总条数
      option1: {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "10%",
          right: "3%",
          left: "15%",
          bottom: "25%",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisLabel: {
              interval: "auto",
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#133579",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(22, 43, 95, 1)",
              },
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: [],
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 20,
                width: 30,
                height: 20,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: ["{d|}", "{a|{c}}\n", "{b|}"].join(","),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      },
      option2: {
        backgroundColor: "transparent",
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [80, 85],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: function (params) {
                    if (params.name !== "") {
                      return params.name + params.value;
                    } else {
                      return "";
                    }
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            },
            data: [],
          },
        ],
      },
      option3: {
        backgroundColor: "transparent",
        color: ["rgba(39, 130, 205, 1)", "rgba(252, 161, 0, 1)"],
        legend: {
          data: ["待处理", "已处理"],
          textStyle: {
            color: "#fff",
          },
          top: "8%",
          left: "8%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "30%",
          left: "10%",
          right: "0",
          bottom: "15%",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#133579",
                width: 2,
              },
            },
            splitArea: {
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
              show: true,
              interval: "auto",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "已处理",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
          {
            name: "待处理",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
        ],
      },
    };
  },
  watch: {
    currentPage() {
      this.getorder();
    },
  },
  methods: {
    headClass() {
      return "background-color: transparent;color:#fff;font-weight:bold;";
    },
    //附件下载
    readStream(res) {
      const link = document.createElement("a");
      let type = res.config.params.path.split(".")[1];
      let blob;
      let name;
      if (type == "png") {
        blob = new Blob([res.data], {
          type: "image/png",
        });
        name = "附件.png";
      }
      if (type == "jpg") {
        blob = new Blob([res.data], {
          type: "image/jpg",
        });
        name = "附件.jpg";
      }
      if (type == "jpeg") {
        blob = new Blob([res.data], {
          type: "image/jpeg",
        });
        name = "附件.jpeg";
      }
      if (type == "gif") {
        blob = new Blob([res.data], {
          type: "image/gif",
        });
        name = "附件.gif";
      }
      if (type == "doc") {
        blob = new Blob([res.data], {
          type: "application/msword",
        });
        name = "附件.doc";
      }
      if (type == "docx") {
        blob = new Blob([res.data], {
          type: "application/msword",
        });
        name = "附件.docx";
      }
      if (type == "xls") {
        blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        name = "附件.xls";
      }
      if (type == "xlsx") {
        blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        name = "附件.xlsx";
      }
      if (type == "pdf") {
        blob = new Blob([res.data], {
          type: "application/pdf",
        });
        name = "附件.pdf";
      }
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      link.setAttribute("download", name);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(link.href);
    },
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
    },
    changelist1(file) {},
    changelist2(file) {},
    changelist3(file) {},
    submit1(file) {
      let params = new FormData(); //转成formdata格式
      params.append("file", file.file);
      this.$http.post("/file/upload", params).then((res) => {
        if (res.data.h.code == 0) {
          this.updateorderform.imagePath1 = res.data.b;
        }
      });
    },
    submit2(file) {
      let params = new FormData(); //转成formdata格式
      params.append("file", file.file);
      this.$http.post("/file/upload", params).then((res) => {
        if (res.data.h.code == 0) {
          this.updateorderform.imagePath2 = res.data.b;
        }
      });
    },
    submit3(file) {
      let params = new FormData(); //转成formdata格式
      params.append("file", file.file);
      this.$http.post("/file/upload", params).then((res) => {
        if (res.data.h.code == 0) {
          this.updateorderform.imagePath3 = res.data.b;
        }
      });
    },
    //工单详情
    examine(row) {
      this.dialogFormVisible1 = true;
      this.$http.get(`/site/workNo/getWorkNo/${row.id}`).then((res) => {
        if (res.data.h.code == 0) {
          this.ordertitle = res.data.b.siteName;
          this.orderdetail = res.data.b;
        }
      });
    },
    orderdetailout() {
      this.dialogFormVisible1 = false;
    },
    //附件一下载
    download1(row) {
      let params = {
        path: row.imagePath1,
      };
      this.$request.get("/file/load", params).then((res) => {
        this.readStream(res);
      });
    },
    //附件二下载
    download2(row) {
      let params = {
        path: row.imagePath2,
      };
      this.$request.get("/file/load", params).then((res) => {
        this.readStream(res);
      });
    },
    //附件三下载
    download3(row) {
      let params = {
        path: row.imagePath3,
      };
      this.$request.get("/file/load", params).then((res) => {
        this.readStream(res);
      });
    },
    //跳转至告警页面
    EnterWarning(row) {
      this.$router.push({
        path: "/warning",
        query: {
          siteNo: row.siteNo,
        },
      });
    },
    //获取工单列表
    getorder() {
      this.loading = true;
      let param = {
        category: this.ordertype || "",
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        workNo: this.ordernum || "",
        siteName: this.sitename || "",
        status: this.orderstatus || "",
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
        status: "",
        workNo: "",
      };
      this.$http
        .post("/site/workNo/statistic", param)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.loading = false;
            let areaname = [];
            let areacount = [];
            res.data.b.area.map((item) => {
              if (item.count > 0) {
                areaname.push(item.name);
                areacount.push(item.count);
              }
            });
            this.$chart1.setOption({
              xAxis: [
                {
                  data: areaname,
                },
              ],
              series: [
                {
                  data: areacount,
                },
              ],
            });
            //环形数据处理
            this.chartData = [];
            if (res.data.b.handledCount > 0) {
              let obj = {};
              obj.value = res.data.b.handledCount;
              obj.name = "已处理";
              this.chartData.push(obj);
            }
            if (res.data.b.newlyCount > 0) {
              let obj = {};
              obj.value = res.data.b.newlyCount;
              obj.name = "待处理";
              this.chartData.push(obj);
            }
            var placeHolderStyle = {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            };
            var data = [];
            var total = 0;
            for (var i = 0; i < this.chartData.length; i++) {
              total += this.chartData[i].value;
            }
            for (var i = 0; i < this.chartData.length; i++) {
              data.push(
                {
                  value: this.chartData[i].value,
                  name: this.chartData[i].name,
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      shadowBlur: 30,
                      borderColor: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#7777eb",
                          },
                          {
                            offset: 1,
                            color: "#70ffac",
                          },
                        ]
                      ),
                      shadowColor: "rgba(142, 152, 241, 0.6)",
                    },
                  },
                },
                {
                  value: total / 4,
                  name: "",
                  itemStyle: placeHolderStyle,
                }
              );
            }
            this.$chart2.setOption({
              series: [
                {
                  data: data,
                },
              ],
            });
          }
        })
        .catch((err) => {});
      let params = {
        category: this.ordertype || "",
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        workNo: this.ordernum || "",
        siteName: this.sitename || "",
        status: this.orderstatus || "",
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
      };
      this.$http
        .post("/site/workNo/list", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.total = res.data.b.total;
            this.tableData = res.data.b.records;
          }
        })
        .catch((err) => {});
    },
    getorderinfo(time) {
      if (time == "年") {
        this.timer = "year";
      }
      if (time == "月") {
        this.timer = "month";
      }
      if (time == "周") {
        this.timer = "week";
      }
      if (time == "日") {
        this.timer = "day";
      }
      let params = {
        category: this.ordertype || "",
        provinceCode: this.message.provincecode || "",
        dataRange: this.timer || "day",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        workNo: this.ordernum || "",
        siteName: this.sitename || "",
        status: this.orderstatus || "",
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
      };
      this.$http
        .post("/site/workNo/statisticsData", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            let timelist = [];
            let onelist = [];
            let twolist = [];
            for (let data in res.data.b) {
              if (data == "handled") {
                res.data.b[data].map((_) => {
                  for (let i in _) {
                    timelist.push(i);
                    onelist.push(_[i]);
                  }
                });
              }
              if (data == "newly") {
                res.data.b[data].map((_) => {
                  for (let i in _) {
                    twolist.push(_[i]);
                  }
                });
              }
            }
            this.$chart3.setOption({
              xAxis: [
                {
                  data: timelist,
                },
              ],
              series: [
                {
                  data: onelist,
                },
                {
                  data: twolist,
                },
              ],
            });
          }
        })
        .catch((err) => {});
    },
    //编辑工单开始
    change(row) {
      this.dialogFormVisible = true;
      this.ordersiteNo = row.title;
      this.updateorderform = Object.assign(this.updateorderform, row);
    },
    //工单编辑表单清空
    updateorderformclear() {
      for (let i in this.updateorderform) {
        this.updateorderform[i] = "";
      }
    },
    //工单编辑结束
    updateorderout() {
      this.$refs.updateorderruleform.clearValidate();
      this.dialogFormVisible = false;
      this.updateorderformclear();
    },
    updateorder(form) {
      this.$refs.updateorderruleform.validate((valid) => {
        if (valid) {
          let params = {
            imagePath1: this.updateorderform.imagePath1,
            imagePath2: this.updateorderform.imagePath2,
            imagePath3: this.updateorderform.imagePath3,
            workNo: form.workNo,
            replay: form.reply,
            remark: form.remark,
          };
          this.$http
            .post("/site/workNo/handle", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.updateorderout();
                this.getorder();
                this.$message({
                  message: "处理成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    timeChange(val) {
      this.getorderinfo(val);
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    //初始化容器
    initbox() {
      this.$chart1 = this.$echarts.init(document.getElementById("orderarea"));
      this.$chart2 = this.$echarts.init(document.getElementById("ordertype"));
      this.$chart3 = this.$echarts.init(document.getElementById("ordertime"));
    },
    //饼图渲染
    initcake() {
      this.$chart1.setOption(this.option1);
      this.$chart2.setOption(this.option2);
      this.$chart3.setOption(this.option3);
    },
  },
  created() {
    this.sitename = this.$route.query.siteName;
    this.ordernum = this.$route.query.workNo;
  },
  mounted() {
    this.getorder();
    this.initbox();
    this.initcake();
    this.getorderinfo();
  },
};
</script>
<style scoped>
.center {
  position: relative;
}
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.cake_chart {
  box-sizing: border-box;
}
.first_box,
.second_box {
  width: 30%;
  height: 32vh;
  float: left;
}
.third_box {
  width: 40%;
  height: 32vh;
  position: relative;
  float: left;
}
.txt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 2px solid #f2f2f2;
  box-sizing: border-box;
}
.first_cake,
.second_cake {
  height: 100%;
  width: 100%;
}
.third_cake {
  width: 100%;
  height: 100%;
}
.center > .el-bottom {
  display: inline-block;
}
.table {
  width: 100%;
  height: 52vh;
  position: relative;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.asile-echart {
  left: 0;
  top: 0;
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.el-form {
  padding: 15px;
  box-sizing: border-box;
}
.order-add .el-form .el-form-item .el-select {
  display: block;
}
.order-update .el-form .el-form-item .el-select {
  display: block;
}
.orderdetail-info .el-form-item {
  display: inline-block;
  width: 45%;
}
.orderdetail-info .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.orderdetail-info .el-form-item:nth-of-type(5) {
  display: block;
  width: 92%;
}
.orderdetail-info .el-form-item:nth-of-type(6) {
  display: inline-block;
  width: 30%;
}
.orderdetail-info .el-form-item:nth-of-type(7) {
  display: inline-block;
  width: 30%;
}
.orderdetail-info .el-form-item:nth-of-type(8) {
  display: inline-block;
  width: 30%;
}
.timer {
  height: 40px;
  line-height: 40px;
  position: absolute;
  clear: both;
  top: 0;
  right: 20px;
  z-index: 1;
  border-radius: 5px;
  padding: 5px;
  color: rgba(184, 222, 255, 1);
}
.timer /deep/ .el-radio-button__inner {
  border: 0;
  color: rgba(184, 222, 255, 1);
  background: transparent;
  box-shadow: none;
}
.timer .el-radio-button__inner {
  border: 0;
  color: rgba(184, 222, 255, 1);
  background: transparent;
  box-shadow: none;
}
</style>
<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
</style>